import React, { useEffect, useState } from 'react';
import { ResponsiveGrid, Pagination, Loading, Button, Dialog, Form, Input, Message } from '@alifd/next';
import { Table, Popconfirm } from 'antd';
import styles from './index.module.scss';
import { getCategories, editCategory, removeCategory } from './service';
import { logger } from 'ice';
import { useEffectOnce } from 'react-use';
import { useRequest } from 'ahooks';

const { Cell } = ResponsiveGrid;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

const CategoryList = () => {
  const { data, error, loading, run } = useRequest(getCategories);
  const [editDialog, setEditDialog] = useState(false);
  const [editValue, setEditValue] = useState(''); // 编辑弹框的value
  const [editId, setEditId] = useState(''); // 编辑弹框的value
  if (error) {
    logger.log(error);
  }
  if (loading) {
    return (
      <ResponsiveGrid gap={20}>
        <Cell colSpan={12}>
          <div className={styles.container}>
            <div className={styles.title}>分类列表</div>
            <div className={styles.loading}>
              <Loading></Loading>
            </div>
          </div>
        </Cell>
      </ResponsiveGrid>
    );
  }
  return (
    <ResponsiveGrid gap={20}>
      <Cell colSpan={12}>
        <div className={styles.container}>
          <div className={styles.title}>分类列表</div>
          <Dialog
            title="编辑分类"
            visible={editDialog}
            height="250px"
            footer={false}
            onClose={() => {
              setEditDialog(false);
            }}
          >
            <div className={styles.editDialog}>
              <Form style={{ width: '60%', marginLeft: 30 }} {...formItemLayout} colon>
                <FormItem label="类别名称" required requiredMessage="请输入类别名称" size="large" labelTextAlign="left">
                  <Input name="categoryName" defaultValue={editValue} />
                </FormItem>
                <FormItem label=" " colon={false} size="medium">
                  <Form.Submit
                    type="primary"
                    validate
                    onClick={(values) => {
                      logger.log(values);
                      editCategory(editId, values.categoryName)
                        .then((res) => {
                          Message.success({
                            content: '修改类别成功',
                          });
                        })
                        .then(() => {
                          run();
                          setEditDialog(false);
                        });
                    }}
                    style={{ marginRight: 8 }}
                  >
                    提交
                  </Form.Submit>
                </FormItem>
              </Form>
            </div>
          </Dialog>
          <div className={styles.tableBody}>
            <Table dataSource={data} rowKey={(record) => record._id}>
              <Table.Column title="Id" dataIndex="_id" />
              <Table.Column title="CategoryName" dataIndex="value" />
              <Table.Column
                dataIndex="_id"
                title="Operate"
                render={(text, record: { value: string; _id: string }, index) => {
                  return (
                    <>
                      <div className={styles.operate}>
                        <Button
                          type="primary"
                          className={styles.btn}
                          onClick={() => {
                            setEditDialog(true);
                            setEditValue(record.value);
                            setEditId(record._id);
                          }}
                        >
                          编辑
                        </Button>
                        <Popconfirm
                          title={`确定要删除${' '}${record.value}${' '}类别吗？`}
                          onConfirm={() => {
                            removeCategory(record._id)
                              .then(() => {
                                Message.success({
                                  content: '删除类别成功',
                                });
                              })
                              .then(() => {
                                run();
                              })
                              .catch((err) => logger.trace(err));
                          }}
                          onCancel={(e) => {
                            logger.log(e);
                          }}
                          okText="确定"
                          cancelText="取消"
                        >
                          <Button type="primary" style={{ backgroundColor: 'rgb(238, 45, 45)' }}>
                            删除
                          </Button>
                        </Popconfirm>
                      </div>
                    </>
                  );
                }}
              />
            </Table>
          </div>
        </div>
      </Cell>
    </ResponsiveGrid>
  );
};

export default CategoryList;
